<template>
  <div class="w-full aspect-square bg-[#ffffff50] rounded-[16px] overflow-hidden">
    <XMImg
      :src="gameDetail?.icon"
      class="w-full h-full object-cover"
    />
  </div>
  <a
    :href="getTargetUrl(`gamePlay?gameId=${gameId}`)"
    class="w-full cursor-pointer h-[60px] text-[20px] font-semibold text-white flex-center rounded-full bg-[#00000070]"
    @click="handleClickTrack"
  >
    Play Now
  </a>
</template>

<script lang="ts" setup>
import { useGA } from "~/composables/useGA";

const { gameDetail, gameId } = defineProps<{
  gameDetail: GameJson;
  gameId: string;
}>();
const { trackEvent } = useGA();

const handleClickTrack = () => {
  trackEvent({
    eventName: "Click_Detail_Play",
    params: {
      Game: gameDetail.name,
    },
  });
};
</script>

<style scoped></style>
